import { TPage } from "../../../shared/ui"
import { init, dispose, registerIndicator } from 'klinecharts'
import { useEffect } from "react"


function genData(timestamp = new Date().getTime(), length = 1000) {
  let basePrice = 5000
  timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000
  const dataList: any = []
  for (let i = 0; i < length; i++) {
    const prices: any = []
    for (let j = 0; j < 4; j++) {
      prices.push(basePrice + Math.random() * 60 - 30)
    }
    prices.sort()
    const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))
    const high = +(prices[3].toFixed(2))
    const low = +(prices[0].toFixed(2))
    const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))
    const volume = Math.round(Math.random() * 100) + 10
    const turnover = (open + high + low + close) / 4 * volume
    dataList.push({ timestamp, open, high, low, close, volume, turnover })

    basePrice = close
    timestamp += 60 * 1000
  }
  return dataList
}

const Main = () => {

  useEffect(() => {

    registerIndicator({
      name: 'MA',
      shortName: 'MA',
      calcParams: [1, 100, 1000],
      figures: [
        { key: 'ma0', title: 'MA1: ', type: 'line' },
        { key: 'ma1', title: 'MA100: ', type: 'line' },
        { key: 'ma2', title: 'MA1000: ', type: 'line' }
      ],
      // 当计算参数改变时，希望提示的和参数一样，即title的值需要改变
      regenerateFigures: (params) => {
        return params.map((p, i) => {
          return { key: `ma${i + 1}`, title: `MA${p}: `, type: 'line' }
        })
      },
      // 计算结果
      calc: (kLineDataList, { calcParams, figures }) => {
        // 注意：返回数据个数需要和kLineDataList的数据个数一致，如果无值，用{}代替即可。
        // 计算参数最好取回调参数calcParams，如果不是，后续计算参数发生变化的时候，这里计算不能及时响应
        const closeSums: any = []
        return kLineDataList.map((kLineData, i) => {
          const ma = {}
          const close = kLineData.close
          calcParams.forEach((param, j) => {
            closeSums[j] = (closeSums[j] || 0) + close
            if (i >= param - 1) {
              ma[figures[j].key] = closeSums[j] / param
              closeSums[j] -= kLineDataList[i - (param - 1)].close
            }
          })
          // 如果有值的情况下，这里每一项的数据格式应该是 { ma1: xxx, ma2: xxx }
          // 每个key需要和figures中的子项key对应的值一致
          return ma
        })
      }
    })
    // 初始化图表
    const chart: any = init('chart')


    chart.createIndicator('MA', false, { id: 'candle_pane' })
    chart.createIndicator('VOL');
    chart.createIndicator("MACD");

    chart.setStyles({
      // 网格线
      grid: {
        show: true,
        horizontal: {
          show: true,
          size: 3,
          color: 'rgb(3 7 18)',
          style: 'soild',
          dashedValue: [2, 2]
        },
        vertical: {
          show: true,
          size: 3,
          color: 'rgb(3 7 18)',
          style: 'soild',
          dashedValue: [2, 2]
        }
      },
      // 蜡烛图
      candle: {
        // 注释 分时图 area  ，其他用这个 candle_solid
        // 蜡烛图类型 'candle_solid'|'candle_stroke'|'candle_up_stroke'|'candle_down_stroke'|'ohlc'|'area'
        type: 'candle_solid',
        // 面积图
        area: {
          lineSize: 2,
          lineColor: '#2196F3',
          value: 'close',
          backgroundColor: [{
            offset: 0,
            color: 'rgba(33, 150, 243, 0.01)'
          }, {
            offset: 1,
            color: 'rgba(33, 150, 243, 0.2)'
          }]
        },
        priceMark: {
          show: true,
          // 最高价标记
          high: {
            show: true,
            color: 'red',
            textOffset: 5,
            textSize: 12,
            textFamily: 'Helvetica Neue',
            textWeight: 'normal'
          },
          // 最低价标记
          low: {
            show: true,
            color: 'green',
            textOffset: 5,
            textSize: 12,
            textFamily: 'Helvetica Neue',
            textWeight: 'normal',
          },
          // 最新价标记
          last: {
            show: false,
          }
        },
        // 提示
        tooltip: {
          // 'always' | 'follow_cross' | 'none'
          showRule: 'none',
          icons: []
        }
      },
      // 技术指标
      indicator: {
        ohlc: {
          upColor: 'rgba(45, 192, 142, .7)',
          downColor: 'rgba(249, 40, 85, .7)',
          noChangeColor: '#888888'
        },
        bars: [{
          // 'fill' | 'stroke' | 'stroke_fill'
          style: 'fill',
          // 'solid' | 'dashed'
          borderStyle: 'solid',
          borderSize: 1,
          borderDashedValue: [2, 2],
          upColor: 'rgba(45, 192, 142, .7)',
          downColor: 'rgba(249, 40, 85, .7)',
          noChangeColor: '#888888'
        }],
        lines: [
          {
            // 'solid' | 'dashed'
            style: 'solid',
            smooth: false,
            size: 1,
            dashedValue: [2, 2],
            color: '#FF9600'
          }, {
            style: 'solid',
            smooth: false,
            size: 1,
            dashedValue: [2, 2],
            color: '#935EBD'
          }, {
            style: 'solid',
            smooth: false,
            size: 1,
            dashedValue: [2, 2],
            color: '#2196F3'
          }, {
            style: 'solid',
            smooth: false,
            size: 1,
            dashedValue: [2, 2],
            color: '#E11D74'
          }, {
            style: 'solid',
            smooth: false,
            size: 1,
            dashedValue: [2, 2],
            color: '#01C5C4'
          }
        ],
        circles: [{
          // 'fill' | 'stroke' | 'stroke_fill'
          style: 'fill',
          // 'solid' | 'dashed'
          borderStyle: 'solid',
          borderSize: 1,
          borderDashedValue: [2, 2],
          upColor: 'rgba(45, 192, 142, .7)',
          downColor: 'rgba(249, 40, 85, .7)',
          noChangeColor: '#888888'
        }],
        // 最新值标记
        lastValueMark: {
          show: false,
          text: {
            show: false,
            // 'fill' | 'stroke' | 'stroke_fill'
            style: 'fill',
            color: '#FFFFFF',
            size: 12,
            family: 'Helvetica Neue',
            weight: 'normal',
            // 'solid' | 'dashed'
            borderStyle: 'solid',
            borderSize: 1,
            borderDashedValue: [2, 2],
            paddingLeft: 4,
            paddingTop: 4,
            paddingRight: 4,
            paddingBottom: 4,
            borderRadius: 2
          }
        },
        // 提示
        tooltip: {
          // 'always' | 'follow_cross' | 'none'
          showRule: 'always',
          // 'standard' | 'rect'
          showType: 'standard',
          showName: true,
          showParams: true,
          defaultValue: 'n/a',
          text: {
            size: 12,
            family: 'Helvetica Neue',
            weight: 'normal',
            color: '#D9D9D9',
            marginTop: 8,
            marginRight: 10,
            marginBottom: 0,
            marginLeft: 6
          },

          icons: []
        }
      },
      // x轴
      xAxis: {
        show: true,
        size: 'auto',
        // x轴线
        axisLine: {
          show: false,
          color: '#888888',
          size: 1
        },
        // x轴分割文字
        tickText: {
          show: true,
          color: 'rgb(107 114 128)',
          family: 'Helvetica Neue',
          weight: 'normal',
          size: 12,
          marginStart: 4,
          marginEnd: 4
        },
        // x轴分割线
        tickLine: {
          show: true,
          size: 1,
          length: 3,
          color: '#888888'
        }
      },
      // y轴
      yAxis: {
        show: true,
        size: 'auto',
        // 'left' | 'right'
        position: 'right',
        // 'normal' | 'percentage' | 'log'
        type: 'normal',
        inside: true,
        reverse: false,
        // y轴线
        axisLine: {
          show: false,
          color: '#888888',
          size: 1
        },
        // x轴分割文字
        tickText: {
          show: true,
          color: 'rgb(107 114 128)',
          family: 'Helvetica Neue',
          weight: 'normal',
          size: 12,
          marginStart: 4,
          marginEnd: 4
        },
        // x轴分割线
        tickLine: {
          show: true,
          size: 1,
          length: 3,
          color: '#888888'
        }
      },
      // 图表之间的分割线
      separator: {
        size: 0,
        color: '#888888',
        fill: true,
        activeBackgroundColor: 'rgba(230, 230, 230, .15)'
      },
      // 十字光标
      crosshair: {
        show: true,
        // 十字光标水平线及文字
        horizontal: {
          show: true,
          line: {
            show: true,
            // 'solid'|'dashed'
            style: 'dashed',
            dashedValue: [4, 2],
            size: 1,
            color: '#888888'
          },
          text: {
            show: true,
            // 'fill' | 'stroke' | 'stroke_fill'
            style: 'fill',
            color: '#FFFFFF',
            size: 12,
            family: 'Helvetica Neue',
            weight: 'normal',
            // 'solid' | 'dashed'
            borderStyle: 'solid',
            borderDashedValue: [2, 2],
            borderSize: 1,
            borderColor: '#686D76',
            borderRadius: 2,
            paddingLeft: 4,
            paddingRight: 4,
            paddingTop: 4,
            paddingBottom: 4,
            backgroundColor: '#686D76'
          }
        },
        // 十字光标垂直线及文字
        vertical: {
          show: true,
          line: {
            show: true,
            // 'solid'|'dashed'
            style: 'dashed',
            dashedValue: [4, 2],
            size: 1,
            color: '#888888'
          },
          text: {
            show: true,
            // 'fill' | 'stroke' | 'stroke_fill'
            style: 'fill',
            color: '#FFFFFF',
            size: 12,
            family: 'Helvetica Neue',
            weight: 'normal',
            // 'solid' | 'dashed'
            borderStyle: 'solid',
            borderDashedValue: [2, 2],
            borderSize: 1,
            borderColor: '#686D76',
            borderRadius: 2,
            paddingLeft: 4,
            paddingRight: 4,
            paddingTop: 4,
            paddingBottom: 4,
            backgroundColor: '#686D76'
          }
        }
      },
      // 覆盖物
      overlay: {
        point: {
          color: '#1677FF',
          borderColor: 'rgba(22, 119, 255, 0.35)',
          borderSize: 1,
          radius: 5,
          activeColor: '#1677FF',
          activeBorderColor: 'rgba(22, 119, 255, 0.35)',
          activeBorderSize: 3,
          activeRadius: 5
        },
        line: {
          // 'solid' | 'dashed'
          style: 'solid',
          smooth: false,
          color: '#1677FF',
          size: 1,
          dashedValue: [2, 2]
        },
        rect: {
          // 'fill' | 'stroke' | 'stroke_fill'
          style: 'fill',
          color: 'rgba(22, 119, 255, 0.25)',
          borderColor: '#1677FF',
          borderSize: 1,
          borderRadius: 0,
          // 'solid' | 'dashed'
          borderStyle: 'solid',
          borderDashedValue: [2, 2]
        },
        polygon: {
          // 'fill' | 'stroke' | 'stroke_fill'
          style: 'fill',
          color: '#1677FF',
          borderColor: '#1677FF',
          borderSize: 1,
          // 'solid' | 'dashed'
          borderStyle: 'solid',
          borderDashedValue: [2, 2]
        },
        circle: {
          // 'fill' | 'stroke' | 'stroke_fill'
          style: 'fill',
          color: 'rgba(22, 119, 255, 0.25)',
          borderColor: '#1677FF',
          borderSize: 1,
          // 'solid' | 'dashed'
          borderStyle: 'solid',
          borderDashedValue: [2, 2]
        },
        arc: {
          // 'solid' | 'dashed'
          style: 'solid',
          color: '#1677FF',
          size: 1,
          dashedValue: [2, 2]
        },
        text: {
          // 'fill' | 'stroke' | 'stroke_fill'
          style: 'fill',
          color: '#FFFFFF',
          size: 12,
          family: 'Helvetica Neue',
          weight: 'normal',
          // 'solid' | 'dashed'
          borderStyle: 'solid',
          borderDashedValue: [2, 2],
          borderSize: 0,
          borderRadius: 2,
          borderColor: '#1677FF',
          paddingLeft: 0,
          paddingRight: 0,
          paddingTop: 0,
          paddingBottom: 0,
          backgroundColor: 'transparent'
        },
        rectText: {
          // 'fill' | 'stroke' | 'stroke_fill'
          style: 'fill',
          color: '#FFFFFF',
          size: 12,
          family: 'Helvetica Neue',
          weight: 'normal',
          // 'solid' | 'dashed'
          borderStyle: 'solid',
          borderDashedValue: [2, 2],
          borderSize: 1,
          borderRadius: 2,
          borderColor: '#1677FF',
          paddingLeft: 4,
          paddingRight: 4,
          paddingTop: 4,
          paddingBottom: 4,
          backgroundColor: '#1677FF'
        }
      }
    });

    // 为图表添加数据
    chart.applyNewData(genData())

    return () => {
      // 销毁图表
      dispose('chart')
    }
  }, [])



  return (
    <TPage classNames="p-[28px]">
      <div id="chart" className="w-full h-[800px]" />
    </TPage>


  )
}

export default Main
